<template>
	<view class="outerBox" :style="{justifyContent: layout,opacity: !disable ? 1 : 0.5}">
		<view class="titelBox" :style="titelStyle">
			{{titel}}
		</view>
		<view class="switch-box" :style="objStyle" @click="switchBox">
			<view class="switch-img-box" :style="roundStyle" :class="{'openStyle':isOpen}">
				<image :src="imgArr[0]" class="onStyle" v-if="!isOpen"></image>
				<image :src="imgArr[1]" class="onStyle" v-else></image>
			</view>
		</view>
	</view>
</template>

<script>
	
/*
*
* {property} boxSize {String,Number} 按钮尺寸，单位 rpx， 默认 40
* {property} offColor {String} 关闭状态下的背景色， 默认 #fff
* {property} onColor {String} 打开状态下的背景色， 默认 #ddd
* {property} imgArr {Array} 按钮图片传入时注意图片路径，最好使用绝对路径，['string','string']  arr[0]关闭状态图 arr[1]打开状态图
* {property} titel {String} 左边的标题文字
* {property} layout {String} 文字与按钮之间的布局，默认 space-between(两端)，可选值：center(居中)，flex-start(由左向右)，flex-end(由右向左)，space-around(相等间隔)
* {property} titelStyle {Object} 左边的标题文字的样式
* {property} changeTime {String,Number} 动画持续时间，默认 0.5s
* {property} disable {Boolean} 是否禁用，默认 false
* 
* {event} change {Function} 在打开或关闭时触发
* 
*/
	
	
	export default {
		name:"nk-switch",
		props:{
			boxSize:{
				type: [String,Number],
				default: '80'
			},
			offColor:{
				type: String,
				default: '#fff'
			},
			onColor:{
				type: String,
				default: '#ddd'
			},
			imgArr:{
				type:Array,
				default:()=>{
					return [
						'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/0d9802c8-a9bc-4973-ab87-497c7bd5c34e.png',
						'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/96968d4f-50c5-437c-be19-d4172b6c9bba.png'
					]
				}
			},
			titel:{
				type: String,
				default: ''
			},
			titelStyle:{
				type: Object,
				default: ()=>{
					return {}
				}
			},
			layout:{
				type: String,
				default: 'space-between'
			},
			changeTime:{
				type: [String,Number],
				default: '0.5'
			},
			value:{
				type: Boolean,
				default: false
			},
			disable:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				objStyle:{
					width: this.boxSize * 2 + 'rpx', 
					height: this.boxSize + 'rpx',
					borderRadius: this.boxSize / 2 + 'rpx',
					backgroundColor: this.offColor,
					transition: 'all ' + this.changeTime + 's'
				},
				roundStyle:{
					width:this.boxSize + 'rpx',
					height:this.boxSize + 'rpx',
					borderRadius: '50%',
					overflow: 'hidden',
					transition: 'all ' + this.changeTime + 's'
				},
				isOpen: false
			};
		},
		created() {
			this.isOpen = this.value
			if(this.isOpen){
				this.objStyle.backgroundColor = this.onColor;
			}else{
				this.objStyle.backgroundColor = this.offColor;
			}
		},
		methods:{
			switchBox(){
				if(this.disable){
					return ;
				}else{
					if(this.isOpen){
						this.isOpen = false;
						this.objStyle.backgroundColor = this.offColor;
					}
					else{
						this.isOpen = true;
						this.objStyle.backgroundColor = this.onColor;
					}
					this.$emit('input', !this.value);
					// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
					this.$nextTick(() => {
						this.$emit('change', this.isOpen);
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.outerBox{
	width: 100%;
	display: flex;
	align-items: center;
	.titelBox{
		font-size: 36rpx;
		font-weight: 600;
		color: #373737;
	}
	.switch-box{
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
		.switch-img-box{
			.onStyle{
				width: 100%;
				height: 100%;
			}
		}
	}
	.openStyle{
		margin-left: 50%;
	}
}

</style>
